<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '笔记',
  },
}
</route>
<template>
  <view class="notes-page">
    <!-- 自定义导航栏 -->
    <view
      class="custom-nav-bar bg-white p-4 border-b border-gray-200 flex justify-between items-center"
      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
    >
      <text class="text-xl font-semibold">我的笔记</text>
      <view class="flex space-x-4">
        <view class="text-gray-500" @click="toggleSearch">
          <text class="i-fa-solid:search"></text>
        </view>
        <view class="text-gray-500" @click="toggleFilter">
          <text class="i-fa-solid:filter"></text>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view v-if="showSearch" class="search-bar bg-white p-4 border-b border-gray-200">
      <view class="flex items-center bg-gray-100 rounded-lg px-3 py-2">
        <text class="i-fa-solid:search text-gray-400 mr-2"></text>
        <input type="text" placeholder="搜索笔记..." v-model="searchQuery" class="flex-1" />
      </view>
    </view>

    <!-- 笔记列表 -->
    <scroll-view scroll-y class="notes-list-container">
      <view class="p-4">
        <!-- 最近更新 -->
        <view class="mb-6">
          <view class="flex justify-between items-center mb-4">
            <text class="text-lg font-semibold text-gray-700">最近更新</text>
          </view>

          <view class="bg-white rounded-lg overflow-hidden shadow-sm mb-4">
            <view
              v-for="(note, index) in recentNotes"
              :key="index"
              class="note-item"
              @click="navigateToNoteDetail(note.id)"
            >
              <view class="note-item-inner">
                <view class="note-header">
                  <text class="note-title">{{ note.title }}</text>
                  <text class="note-date">{{ note.date }}</text>
                </view>
                <text class="note-content">{{ note.content }}</text>
                <view class="note-footer">
                  <view class="note-tags">
                    <text
                      v-for="(tag, tagIndex) in note.tags"
                      :key="tagIndex"
                      class="note-tag"
                      :style="{ backgroundColor: getTagColor(tag) }"
                    >
                      {{ tag }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 所有笔记 -->
        <view>
          <view class="flex justify-between items-center mb-4">
            <text class="text-lg font-semibold text-gray-700">所有笔记</text>
            <text class="text-sm text-gray-500">{{ notes.length }}个笔记</text>
          </view>

          <view class="bg-white rounded-lg overflow-hidden shadow-sm">
            <view
              v-for="(note, index) in notes"
              :key="index"
              class="note-item"
              @click="navigateToNoteDetail(note.id)"
            >
              <view class="note-item-inner">
                <view class="note-header">
                  <text class="note-title">{{ note.title }}</text>
                  <text class="note-date">{{ note.date }}</text>
                </view>
                <text class="note-content">{{ note.content }}</text>
                <view class="note-footer">
                  <view class="note-tags">
                    <text
                      v-for="(tag, tagIndex) in note.tags"
                      :key="tagIndex"
                      class="note-tag"
                      :style="{ backgroundColor: getTagColor(tag) }"
                    >
                      {{ tag }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加笔记按钮 -->
    <view class="add-button" @click="navigateToNoteEdit">
      <text class="i-fa-solid:plus text-xl text-white"></text>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'NotesPage',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 状态
const showSearch = ref(false)
const searchQuery = ref('')

// 模拟笔记数据
const recentNotes = ref([
  {
    id: '1',
    title: '项目会议记录',
    content: '今天的讨论重点是新功能开发计划，团队决定优先实现用户反馈最多的三个功能...',
    date: '2023/6/15 15:30',
    tags: ['工作', '会议'],
  },
  {
    id: '2',
    title: '学习React Hooks',
    content:
      'React Hooks是React 16.8中的新增特性，它可以让你在不编写class的情况下使用state和其他React特性...',
    date: '2023/6/14 20:45',
    tags: ['学习', 'React'],
  },
])

const notes = ref([
  {
    id: '1',
    title: '项目会议记录',
    content: '今天的讨论重点是新功能开发计划，团队决定优先实现用户反馈最多的三个功能...',
    date: '2023/6/15 15:30',
    tags: ['工作', '会议'],
  },
  {
    id: '2',
    title: '学习React Hooks',
    content:
      'React Hooks是React 16.8中的新增特性，它可以让你在不编写class的情况下使用state和其他React特性...',
    date: '2023/6/14 20:45',
    tags: ['学习', 'React'],
  },
  {
    id: '3',
    title: '旅行计划',
    content: '下个月计划去云南，需要准备的物品：护照、相机、充电宝、雨伞...',
    date: '2023/6/10 09:15',
    tags: ['旅行', '计划'],
  },
  {
    id: '4',
    title: '读书笔记：深入理解TypeScript',
    content:
      'TypeScript的高级类型系统可以帮助我们构建更健壮的代码库，今天学习了类型保护和区分联合类型...',
    date: '2023/6/5 22:30',
    tags: ['学习', 'TypeScript', '读书笔记'],
  },
])

// 切换搜索栏
const toggleSearch = () => {
  showSearch.value = !showSearch.value
  if (!showSearch.value) {
    searchQuery.value = '' // 关闭搜索时清空搜索词
  }
}

// 切换筛选
const toggleFilter = () => {
  uni.showToast({
    title: '筛选功能开发中',
    icon: 'none',
  })
}

// 获取标签颜色
const getTagColor = (tag: string) => {
  switch (tag) {
    case '工作':
      return 'rgba(255, 87, 34, 0.1)'
    case '会议':
      return 'rgba(156, 39, 176, 0.1)'
    case '学习':
      return 'rgba(33, 150, 243, 0.1)'
    case 'React':
      return 'rgba(0, 188, 212, 0.1)'
    case 'TypeScript':
      return 'rgba(139, 195, 74, 0.1)'
    case '旅行':
      return 'rgba(255, 193, 7, 0.1)'
    case '计划':
      return 'rgba(121, 85, 72, 0.1)'
    case '读书笔记':
      return 'rgba(233, 30, 99, 0.1)'
    default:
      return 'rgba(158, 158, 158, 0.1)'
  }
}

// 导航到笔记详情
const navigateToNoteDetail = (noteId: string) => {
  uni.navigateTo({
    url: `/pages/notes/detail?id=${noteId}`,
  })
}

// 导航到笔记编辑页面
const navigateToNoteEdit = () => {
  uni.navigateTo({
    url: '/pages/notes/edit',
  })
}
</script>

<style lang="scss">
.notes-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f7;
}

.notes-list-container {
  flex: 1;
  width: 100%;
}

.note-item {
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
}

.note-item-inner {
  padding: 16px;
}

.note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.note-title {
  font-size: 16px;
  font-weight: 600;
}

.note-date {
  font-size: 12px;
  color: #8e8e93;
}

.note-content {
  display: -webkit-box;
  margin-bottom: 12px;
  overflow: hidden;
  font-size: 14px;
  color: #3c3c43;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.note-tags {
  display: flex;
  flex-wrap: wrap;
}

.note-tag {
  padding: 2px 8px;
  margin-right: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  border-radius: 10px;
}

.add-button {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: white;
  background-color: #007aff;
  border-radius: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
</style>
